<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>信用评分来源</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">		
	</head>
	<style type="text/css">
		body{overflow-y: auto; background-color: #fff;}	
	   .mui-content{background-color: #fff;}
  	   .mui-content>.pokedex{text-align: center;font-size: .3rem; color: #333;width: 100%; height: 6rem; position: relative; background-color: #f6f6f6;padding:1.2rem 0 0 0;}
  	   .mui-content>.pokedex>.pokedex_pic{background:url(../../../images/credit/score_bg.png) no-repeat; background-size: cover; width:3.81rem; height:3.63rem;line-height:4rem; margin:0 auto; color: #12ade5; font-size:.66rem; font-weight: bold;}
  	   .mui-content>.pokedex>p{position: absolute; left: 0px; top: 0px;font-size: .3rem; color: #333;}
  	   .mui-content>.pokedex>p>span{display:block; vertical-align: middle; width:.4rem; height:.4rem; background: url(../../../images/credit/c_ico03.png) no-repeat; background-size: cover; margin: .05rem auto;}
  	   .mui-content>.pokedex>p>.credit_ico02{background: url(../../../images/credit/c_ico04.png) no-repeat;background-size: cover;}
  	   .mui-content>.pokedex>p>.credit_ico03{background: url(../../../images/credit/c_ico05.png) no-repeat;background-size: cover;}
  	   .mui-content>.pokedex>p>.credit_ico04{background: url(../../../images/credit/c_ico06.png) no-repeat;background-size: cover;}
       .mui-content>.pokedex>p>.credit_ico05{background: url(../../../images/credit/c_ico07.png) no-repeat;background-size: cover;}              
  	   .mui-content>.pokedex>.pokedex_txt01{left:3.1rem; top: .2rem; vertical-align: middle;}
  	   .mui-content>.pokedex>.pokedex_txt02{left:.4rem; top:2.3rem;}
  	   .mui-content>.pokedex>.pokedex_txt03{left:5.7rem; top: 2.3rem;}
  	   .mui-content>.pokedex>.pokedex_txt04{left:1.6rem; top: 4.6rem;}
       .mui-content>.pokedex>.pokedex_txt05{left:4.7rem; top: 4.6rem;}
  	   .credit_rating{text-align: center;margin: .55rem auto;} 
  	   .credit_rating .rating_txt{font-size: .36rem; color: #019ceb; display: inline-block; vertical-align:middle; margin: 0 .25rem;}
  	   .credit_rating .line{display: inline-block; vertical-align: middle; width:1.5rem; border-top:1px solid #019ceb}
  	   .credit_rating .rating_floor{margin: .45rem auto;}
  	   .credit_rating .floor_top{text-align: center; width: 6.35rem; margin: auto;}
  	   .credit_rating .floor_top>span{font-size:.28rem;display:block; float: left; width:1.3rem; height: .6rem; line-height: .6rem; text-align: center;}
  	   .credit_rating .floor_top>span:nth-of-type(1){color: #e75845;}
  	   .credit_rating .floor_top>span:nth-of-type(2){color: #ee8205;}
  	   .credit_rating .floor_top>span:nth-of-type(3){color: #44b530;}
  	   .credit_rating .floor_top>span:nth-of-type(4){color: #03bfb2;}
  	   .credit_rating .floor_top>span:nth-of-type(5){color: #039eea;}
  	   .credit_rating .floor_top>span.active{background: url(../../../images/credit/level_bg.png) no-repeat center top; width: .9rem; background-size: cover; color: #fff; line-height: .5rem;}
  	   .credit_rating .floor_center{line-height: 1;}  	   
  	   .credit_rating .floor_center>img{width: 6.35rem; height:.18rem; margin: auto;}
  	   .credit_rating .floor_bottom{width:6.35rem; margin: auto; text-align: left;}
  	   .credit_rating .floor_bottom>span{color: #999; font-size: .22rem; text-align: left; display:block; float: left; width:1rem; margin-left: .18rem;}
  	   .credit_rating .floor_bottom>span:first-child{margin-left: .1rem;}
  	   .credit_rating .floor_bottom>span:nth-of-type(2){margin-left: .1rem;}
  	   .credit_rating .floor_bottom>span:nth-of-type(4){margin-left: .3rem;}
  	   .credit_rating .floor_bottom>span:last-child{text-align: right; width: .07rem;}
  	   .reminder{font-size: .3rem;color: #666; padding: 0 .6rem; margin:.7rem auto; text-align: justify;}
  	   
  	   
  	   
	</style>
	<body>
		<!-- 主体start -->
		<div class="mui-content">		
			<!-- 实名认证图鉴start -->
            <div class="pokedex">
            	<div class="pokedex_pic" id="countScore"></div>
            	<p class="pokedex_txt01"><span class="credit_ico01"></span>实名程度</p>
            	<p class="pokedex_txt02"><span class="credit_ico02"></span>网上申请</p>
            	<p class="pokedex_txt03"><span class="credit_ico03"></span>预约情况</p>
            	<p class="pokedex_txt04"><span class="credit_ico04"></span>评价情况</p>
            	<p class="pokedex_txt05"><span class="credit_ico05"></span>第三方数据</p>
            </div>
			<!-- 实名认证图鉴end -->
			<!-- 我的信用等级start -->
			<div class="credit_rating">
				<div class="rating_title">
					<span class="line"></span>
					<h3 class="rating_txt">我的信用等级</h3>
					<span class="line"></span>
				</div>
				<div class="rating_floor">
					<div class="floor_top mui-clearfix">
						<span id="speed01">较差</span>
						<span id="speed02">中等</span>
						<span id="speed03">良好</span>
						<span id="speed04">优秀</span>
						<span id="speed05" class="active">极好</span>					
					</div>
					<div class="floor_center">
						<img src="../../../images/credit/level_line.png"/>
					</div>
					<div class="floor_bottom">
						<span>0</span>
						<span>20</span>
						<span>40</span>
						<span>60</span>
						<span>80</span>	
						<span>100</span>	
					</div>					
				</div>
				<p class="reminder">温馨提示：网上申报+5分；事后评价+5分；预约来办+5分；网上支付+5分；实名认证+5分；</p>
			</div>
			<!-- 我的信用等级end -->
		</div>
		<!-- 主体end -->
	</body>
	<script src="../../../js/mui.min.js"></script><!-- mui -->
	<script src="../../../js/common.js"></script><!-- 共用rem适配-js -->
	<script src="../../../js/jquery2.2.4.min.js"></script>	<!-- jquery --> 
	<script src="../../../js/app.js"></script>
	<script>
		mui.init();
		mui.plusReady(function() {
			loadCreditList();
		});
		/**
		 * 加载数据
		 */
		function loadCreditList() {
			var param = 'userId=' + getUserId();
			var url = 'appHttpService/appCreditDimension.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					var  countScore = data.countScore;
					if(countScore > 100){
						countScore = 100;
					}
					document.getElementById("countScore").innerHTML = countScore;
					$(".floor_top span").removeClass("active");
					
					if(countScore > 80){
        				//极好
			        	$("#speed05").addClass("active");
			        }else if(countScore > 60 && countScore <= 80){
			        	//优秀
			        	$("#speed04").addClass("active");
			        }else if(countScore > 40 && countScore <= 60){
			        	//良好
			        	$("#speed03").addClass("active");
			        }else if(countScore > 20 && countScore <= 40){
			        	//中等
			        	$("#speed02").addClass("active");
			        }else if(countScore > 0 && countScore <= 20){
			        	//较差
			        	$("#speed01").addClass("active");
			        }
				}
			}, param);
		};
		
	</script>
</html>
